<template>

	<view class="page">
		
		<view class="header">
			<view class="postion" @click="positionClick()">
				<image src="/static/images/index/定位.png" class="pos-icon"></image>
				<text class="pos-where">{{ curPosition }}</text>
				<image src="/static/images/index/arrow.png" class="pos-arrow"></image>
			</view>
			<view class="search" @click="pageTo('/pages/search/search')">
				<image src="/static/images/index/searchIcon.png" class="search-icon"></image>
				<input placeholder="请输入商家或商品名称" class="search-input" readonly />
				<view class="search-btn"><text>搜索</text></view>
			</view>
		</view>
		
		<view class="nav">
			<view class="nav-item" v-for="index in navItemTitles.length" @click="handleClickNav(index)">
				<image :src="navItemPaths(index)"></image>
				<text>{{ navItemTitles[index-1] }}</text>
			</view>
		</view>

		<view class="banner">
			<swiper class="swiper" circular="true" autoplay="true" 
				:interval="5000" :duration="500">
				<swiper-item v-for="index in navItemTitles.length" @click="bannerClick(index)">
					<view class="banner-content">{{ navItemTitles[index-1] }}</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="cardTags">
			<view class="card-tag">{{ cardTags[0] }}</view>
			<view class="card-tag">{{ cardTags[1] }}</view>
			<view class="card-tag">{{ cardTags[2] }}</view>
			<view class="card-tag">{{ cardTags[3] }}</view>
			
			<view class="card-tag-total"><image src="/static/images/index/more.png"></image></view>
		</view>
		
		<view class="cards">
			<view class="card-item" v-for="index in cardCounts">
				<view class="card-left"><image :src="cardUrl(index)"></image></view>
				<view class="card-right"></view>
			</view>
		</view>
		
	</view>

</template>

<script setup>
	import { pageTo } from "/utils/main.js"
	import { ref } from "vue"
	const curPosition = ref("西南大学")
	
	const navItemTitles = [
		"美食", "鲜花蛋糕", "甜点饮品", "快食简餐", "超市便利", 
		"午餐优选", "异国料理", "小吃馆", "家常菜", "汉堡披萨"
	]
	const navItemPaths = (index) => {
		return `/static/images/index/nav${index}.png`
	}
	const cardTags = ["点评高分", "优惠商家", "满减优惠", "品牌商家"]
	
	const cardCounts = 10;
	const cardUrl = (index) => {
		return `/static/images/index/cards/card${index}.png`
	}
	
	const bannerClick = (index) => {
		console.log("banner: ", index)
	}
	const positionClick = () => {
		console.log("pos")
	}
	const searchClick = () => {
		console.log("search")
	}
	
	function handleClickNav(_index) {
		const _title = navItemTitles[_index-1]
		uni.navigateTo({
			url: `/pages/shop_list/shop_list?type=${_index}&title=${_title}`
		})
	}
	
	
</script>

<style>
	@import url("../../static/styles/index/index.scss");
</style>
